<template>
    <div class="login_page">
        <div class="wrap">
            <div class="wpn">
                <div class="form-data pos">
                    <a :href="webPath"><img src="/images/logo/head_logo.png" class="head-logo"></a>
                    <el-form ref="ruleForm" :rules="rules" :model="form">
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.name" placeholder="请输入登录账号"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="password">
                            <el-input type="password" v-model="form.password" placeholder="请输入登录密码"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-col :span="12">
                                <el-form-item prop="code">
                                    <el-input placeholder="请输入验证码" v-model="form.code" style="width:100%;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">&nbsp;</el-col>
                            <el-col :span="11">
                                <img id="codeImg" :src="code_url" @click="freshCode()">
                            </el-col>
                        </el-form-item>
                        <el-form-item class="form-option">
                            <el-button type="primary" plain @click="submitForm('ruleForm')">登 录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="footer-info">
                    <span>©{{ web_config.copyright }} {{ web_config.name }}（{{ web_config.webPath }}） All Rights Reserved </span>
                    <span class="beian_info">{{ web_config.beian }}
                        <el-link :underline="false" target="_blank" :href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+web_config.beino">
                            <el-image src="/images/bei.png"/>{{ web_config.gongan }}
                        </el-link>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                web_config: web_config,
                webPath: webPath,
                form: {name: '', password: '', code: ''},
                rules: {
                    name: [{required: true, message: '请输入登录账户', trigger: 'blur'},],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'},],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
                },
                code_url: basePath + '/verify/login',
            }
        },
        mounted() {
            this.freshCode();
        },
        methods: {
            freshCode() {
                this.form.code = '';
                this.form.token = 'verify_' + Math.random();
                this.code_url = basePath + '/verify/login?token=' + this.form.token;
            },
            submitForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post(basePath + '/login', this.form).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: res.success ? 'success' : 'error'
                            })
                            if (res.success) {
                                //登录成功
                                _this.$store.dispatch("Authorization", res.data);
                                _this.$store.dispatch("Login");
                                _this.$store.dispatch("FreshRole");
                                setTimeout(() => {
                                    window.location.reload()
                                }, 2000);
                            } else {
                                _this.freshCode();
                            }
                        });
                    } else {
                        this.$message.error('请填写完登录信息');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .login_page {
        width: 100%;
        height: 100%;
        background: #3895e8;
        position: relative;

        .wrap {
            box-sizing: border-box;
            height: 100vh;
            background: url('/images/bg.jpg') no-repeat center;
            background-size: auto 100vh;
            position: relative;

            .wpn {
                width: 1180px;
                margin: 0 auto;

                .form-data {
                    background-color: #ffffff;
                    width: 460px;
                    left: 50%;
                    margin-left: -230px;
                    border-radius: 5px;
                    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
                    padding: 65px 0 30px 0;
                    position: fixed;
                    top: 15%;

                    .head-logo {
                        position: absolute;
                        top: -47px;
                        left: 116px;
                        width: 228px;
                        height: 93px;
                    }

                    .el-form {
                        margin: 0 60px;

                        .el-form-item {
                            margin-bottom: 16px;
                        }

                        .el-input {
                            border-bottom: 1px solid #e5e5e5;
                            height: 44px;
                            line-height: 14px;
                            position: relative;
                        }

                        .el-button {
                            height: 48px;
                            width: 100%;
                        }
                    }
                }
            }

            .footer-info {
                font-size: 14px;
                position: absolute;
                width: 100%;
                bottom: 10px;
                text-align: center;
                line-height: 25px;
                left: 0;

                .el-link {
                    vertical-align: 0;
                    padding-left: 12px;
                    color: rgba(250, 250, 250, 0.8);

                    .el-image {
                        vertical-align: -6px;
                        padding-right: 2px;
                    }
                }

                span {
                    color: rgba(250, 250, 250, .8);
                    display: block;
                }
            }
        }
    }
</style>
<style>
    .login_page .el-form-item__content {
        line-height: 12px;
    }

    .login_page .el-input__inner {
        outline: none;
        border: none;
        background-color: transparent;
        padding: 0;
        position: absolute;
        bottom: 0;
        font-size: 16px;
    }
</style>
